<template>
  <div>
    <import-dialog-qvil
      ref="importDialogRef"
      :activity-id="activityId"
      :import-api="importApi"
      :template-api="getTemplateApi"
      title="批量导入入住信息"
      @close="handleClose"
      @error="handleError"
      @success="handleSuccess"
    >
      <template #tip>
        <div class="import-tips">
          <p>
            <el-icon><info-filled /></el-icon>
            导入说明：
          </p>
          <ul>
            <li>请先下载导入模板，按照模板格式填写数据后再上传。</li>
            <li>请确保在模板中正确填写姓名、电话和酒店名称。</li>
            <li>日期格式请严格按照YYYY-MM-DD格式填写，例如：2024-01-01。</li>
            <li>房型请从以下选项中选择：{{ Object.values(HOUSE_TYPES).join('、') }}。</li>
            <li>支持的文件格式为 xlsx 或 xls，文件大小不能超过2MB。</li>
          </ul>
        </div>
      </template>
    </import-dialog-qvil>
  </div>
</template>

<script lang="ts" setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'
import { HOUSE_TYPES } from '../config'
import { getTemplateApi, importApi } from '/@/api/hotelCheckin'
import ImportDialogQvil from '/@/components/ImportDialogQvil/index.vue'

// 定义props
interface Props {
  activityId?: string
}

const props = withDefaults(defineProps<Props>(), {
  activityId: '',
})

// 定义事件
const emit = defineEmits<{
  (e: 'success', data: any): void
  (e: 'error', error: any): void
  (e: 'close'): void
}>()

// 活动ID
const activityId = ref(props.activityId || localStorage.getItem('hongyouActId') || '')

// 监听props中activityId的变化
watch(
  () => props.activityId,
  (newValue) => {
    if (newValue) {
      activityId.value = newValue
    }
  }
)

// 导入对话框引用
const importDialogRef = ref()

// 打开导入对话框
const openImportDialog = () => {
  if (!activityId.value) {
    ElMessage.warning('请先选择活动，再进行批量导入')
    return
  }
  importDialogRef.value?.open()
}

// 导入成功处理
const handleSuccess = (data: any) => {
  // 不需要显示成功消息，已在通用组件中处理

  // 记录导入统计数据
  const totalCount = data.all || 0
  const successCount = data.success || 0
  const errorCount = data.error || 0

  console.log('导入结果统计:', {
    总数: totalCount,
    成功: successCount,
    失败: errorCount,
  })

  emit('success', data)
}

// 导入错误处理
const handleError = (error: any) => {
  // 不重复输出详细错误日志，避免控制台重复显示错误

  // 不重复显示错误消息，因为通用组件已经处理过了
  emit('error', error)

  // 确保对话框不会因为错误而关闭，让用户可以重试
  // 如果需要关闭，用户可以手动点击取消按钮
}

// 关闭处理
const handleClose = () => {
  emit('close')
}

// 主动重置导入对话框状态（可用于外部调用）
const resetImportDialog = () => {
  if (importDialogRef.value) {
    // 使用组件提供的reset方法重置状态
    importDialogRef.value.reset?.()
  }
}

// 导出方法给父组件使用
defineExpose({
  openImportDialog,
  resetImportDialog,
})
</script>

<style lang="scss" scoped>
.import-tips {
  margin: 10px 0;
  color: var(--el-text-color-regular);
  font-size: 14px;

  p {
    font-weight: 500;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  ul {
    padding-left: 18px;
    margin: 0;

    li {
      margin-bottom: 6px;
      line-height: 1.5;
    }
  }
}
</style>
